import './index.scss'
import {Button, Text, View} from '@tarojs/components'
import {observer} from 'mobx-react'
import {useContext, useEffect} from 'react'
import Taro, {useDidHide, useDidShow, useRouter} from '@tarojs/taro'
import {devBaseInfoStore} from './model'
import {DeviceStatusIcon, IconImg} from '@/components/images'
import {CItem} from '@/components/item'
import {
  toBaseInfoEdit,
  toBeSharedBaseInfoEdit,
  toContactUs,
  toDevInfo,
  toServerInfo
} from '@/utils/pageRedirect'

const Devbaseinfo = () => {
  let router = useRouter()
  const {updatePageQuery, pageQuery, updatePageDataSource, pageData} =
    useContext(devBaseInfoStore)

  // 可以使用所有的 React Hooks
  useEffect(() => {
    console.log('Devbaseinfo useEffect')
  })
  // 对应 onShow
  useDidShow(() => {
    console.log('Devbaseinfo useDidShow')
    updatePageQuery(router.params)
    updatePageDataSource()
  })
  // 对应 onHide
  useDidHide(() => {
    console.log('Devbaseinfo useDidHide')
  })

  return (
    <View className="container">
      <View className="mt-12 bg-white border-0 border-b-1 border-solid border-x_line p-24">
        <View className="mb-16 flex items-center">
          <IconImg
            imgName="device"
            style={{
              width: '40rpx',
              height: '40rpx',
              marginRight: '12rpx'
            }}
          ></IconImg>
          <View className="hanzi text-16 font-bold">{pageData?.devName}</View>
        </View>
        <View className="mb-10 flex items-center">
          <DeviceStatusIcon
            status={pageData?.devStatus || ''}
            style={{
              width: '28rpx',
              height: '28rpx',
              marginRight: '14rpx'
            }}
          ></DeviceStatusIcon>
          <View className="hanzi text-14 font-bold">
            {pageData?.devStatus || '无状态'}
          </View>
        </View>
        <View className="mb-10 text-13 text-xx_text truncate">
          {pageData?.devAddress || '未设置地址'}
        </View>
        <View
          className="text-13"
          style={{
            color: '#4F82AF'
          }}
        >
          型号
          <View
            className="inline ml-4"
            style={{
              color: '#4F82AF'
            }}
          >
            {pageData?.devTypeName || '无型号'}
          </View>
        </View>
      </View>
      <CItem
        style={{
          height: '146rpx',
          justifyContent: 'space-between',
          background: '#fff',
          padding: '0 48rpx !important'
        }}
        onClick={() => {
          console.log(pageQuery.isManage)

          if (pageQuery.isManage === '是') {
            toBaseInfoEdit({devId: pageQuery.devId})
          } else {
            toBeSharedBaseInfoEdit({devId: pageQuery.devId})
          }
        }}
      >
        <View className="hanzi text-14 font-medium">基本信息</View>
      </CItem>
      <View className="px-18 mt-16 bg-white">
        <CItem
          style={{
            height: '146rpx',
            justifyContent: 'space-between',
            borderBottom: '2rpx solid #f0f0f0'
          }}
          onClick={() => toDevInfo({devId: pageQuery.devId})}
        >
          <View className="hanzi text-14 font-medium">设备信息</View>
        </CItem>
        <CItem
          style={{
            height: '146rpx',
            justifyContent: 'space-between'
          }}
          onClick={() => toServerInfo({devId: pageQuery.devId})}
        >
          <View className="hanzi text-14 font-medium">服务信息</View>
        </CItem>
      </View>

      <View className="px-16 mt-48">
        <Button
          className="h-48 leading-48 bg-white rounded-6 border-1 border-solid border-primary text-primary text-16 text-center font-medium"
          onClick={() => {
            toContactUs()
          }}
        >
          联系客服
        </Button>
      </View>
    </View>
  )
}
export default observer(Devbaseinfo)
